<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>MyPetStore</title>
	<link rel="StyleSheet" href="css/mypetstoreNew.css" type="text/css" media="screen"/>
</head>
<body>

	<div class="Header">

		<div class="FirstFloor">
			<div class="Logo">
				<a href="/mainForm"></a>
			</div>
			<div class="Search">
				<form action="searchProduct" method="post">
					<input type="text"  class="SearchTextField" name="keyword" size="14" autocomplete="off"/>
					<input type="submit" class="SearchButton" name="searchProducts" value="Search" />
					<div>
						<select class="DropDownBox" name="ways">
							<option value="category">category</option>
							<option value="product">product name</option>
						</select>
					</div>
				</form>

				<div class="SearchAutoCompleteDiv">
					<ul class="SearchAutoComplete"></ul>
				</div>
			</div>
		</div>


		<div class="SecondFloor">
			<span th:if="${account}==null">

				<div class="SignIn">
					<a href="loginRegister" class="beforeSignIn">Sign in <i class="fa-solid fa-right-to-bracket"></i></a>
				</div>
				<div class="Cart">
					<a href="/cartForm" class="beforeSignIn">Shopping Cart <i class="fa-solid fa-cart-shopping"></i></a>
				</div>
				<div class="Problem">
					<a href="help.html" class="beforeSignIn"> Problem <i class="fa-regular fa-circle-question"></i></a>
				</div>

			</span>
			<span th:if="${account}!=null">

				<div class="SignOut">
					<a href="signoutForm" class="afterSignIn">Sign Out <i class="fa-solid fa-right-from-bracket"></i></a>
				</div>
				<div class="MyAccount">
					<a href="myaccountForm" class="afterSignIn">My Account <i class="fa-solid fa-user"></i></a>
				</div>
				<div class="Cart">
					<a href="/cartForm" class="afterSignIn">Shopping Cart <i class="fa-solid fa-cart-shopping"></i></a>
				</div>
				<div class="Problem">
					<a href="help.html" class="afterSignIn">Problem <i class="fa-regular fa-circle-question"></i></a>
				</div>

			</span>

		</div>

		<div class="ThirdFloor">
			<div class="FishLink">
				<a href="categoryForm?categoryId=FISH"><i class="fa-solid fa-fish-fins"></i> Fish</a><br/>
			</div>
			<div class="DogLink">
				<a href="categoryForm?categoryId=DOGS"><i class="fa-solid fa-dog"></i> Dogs</a><br/>
			</div>
			<div class="ReptileLink">
				<a href="categoryForm?categoryId=REPTILES"><i class="fa-solid fa-dragon"></i> Reptiles</a><br/>
			</div>
			<div class="CatLink">
				<a href="categoryForm?categoryId=CATS"><i class="fa-solid fa-cat"></i> Cats</a><br/>
			</div>
			<div class="BirdLink">
				<a href="categoryForm?categoryId=BIRDS"><i class="fa-solid fa-dove"></i> Birds</a><br/>
			</div>


		</div>

	</div>

	<!--<div id="Content"><stripes:messages /></div> ???????????????????????????????? -->

</body>
</html>